<template>
    <el-popover
            placement="top-start"
            :title="node.nodeName"
            v-model="popoverVisible"
            @close="$emit('close')"
            trigger="manual"
            :open-delay="300">
        <div v-loading="itemLoading" class="popoover-card" style="width: 300px">
            <p>Mac地址：{{ node.nodeMac }}</p>
            <p>vlan：{{ node.vlan }}</p>
            <p>ip地址：{{node.ip}}</p>
            <p>设备分类：{{deviceTypeMap[node.deviceType]}}</p>
            <p>设备状态：{{node.status ? '正常' : '故障'}}</p>
            <p>历史连接：{{node.historyNodeNameList | arrayToStr}}</p>
            <p>实时连接：{{node.nodeNameList | arrayToStr}}</p>
            <div class="flex-row">
                <el-button type="text" @click="openAdd(node, 'edit')">编辑</el-button>
                <el-button type="text" @click="deleteConfirm(node)">删除</el-button>
            </div>
        </div>
        <div slot="reference" class="flex-column flex-center" :class="{'empty-node': !node.code}">
            <img class="node-icon"
                 :style="{
                          width: sizes.diameter + 'px',
                          height: sizes.diameter + 'px',
                     }"
                 :draggable="false"
                 :src="getDeviceIcons(node.deviceType)"
                 alt="">
            <p class="node-name">{{node.nodeName}}</p>
        </div>
    </el-popover>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'nodeInfo',
  props: {
    node: {
      type: Object,
      required: true
    },
    sizes: {
      type: Object,
      required: true
    },
    popIds: {
      type: Array
    }
  },
  computed: {
    ...mapState('dict', ['deviceTypeMap', 'getDeviceIcons']),
  },
  watch: {
    popIds: {
      handler(N) {
        this.popoverVisible = N && N.includes(this.node?.id)
      },
      deep: true
    }
  },
  data() {
    return {
      popoverVisible: false,
      currentItem: null,
      itemLoading: false,
      visible: false,
      dispalyItem: {},
    }
  },
  methods: {
    open() {
      this.popoverVisible = true
    },
    loadNode({id}) {
      this.itemLoading = true
      this.$http.get('/topu/getNodeDetail', {
        params: {
          id
        }
      }).then(res => {
        this.dispalyItem = res
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取节点信息失败')
      }).finally(() => {
        this.itemLoading = false
      })
    },
    openAdd(item) {
      this.$emit('editNode', item)
      this.popoverVisible = false
    },
    deleteConfirm(item) {
      // this.$confirm('是否删除所选节点').then(res => {
      this.$confirm('是否删除所选节点').then(() => {
        this.$emit('deleteNode', item)
      // }).catch(err => {
      }).catch(() => {
        console.log('取消执行')
      })
    },
    handleOk() {
      this.$refs.nodeForm.validate((valid) => {
        if (valid) {
          this.$emit(this.currentItem.operateType, {
            current: this.currentItem,
            form: this.formItem
          })
        } else {
          return false;
        }
      })
    },
    cancel() {
      this.visible = false
      this.formItem = {
        nodeName: '',
        nodeMac: '',
        deviceType: '',
        position: 'same'
      }
    },
  }
}
</script>

<style lang="scss" scoped>
    .error-node {
        .node-name {
            color: red;
        }
    }
    .empty-node {
        opacity: 0.5;
    }
    .node-icon {
        background: #ffffff;
        border-radius: 50%;
        overflow: hidden;
        padding: 5px;
    }
    .node-name {
        text-align: center;
    }
    .popoover-card {
        width: 200px;
        p {
            line-height: 30px;
        }
    }
</style>